<template>
  <div>
    <!-- 头部搜索区域 -->
    <van-row class="topRow">
      <van-col span="2" @click="hanldeHome">
        <van-icon name="arrow-left" />
      </van-col>
      <van-col span="21">
        <van-search v-model="searchValue" shape="round" background="#fff" placeholder="请输入搜索关键词" />
      </van-col>
    </van-row>

    <!-- 普通商品分类区域 -->
    <van-tree-select height="600px" :items="items" :main-active-index.sync="active">
      <template #content>
        <van-row type="flex" v-if="active === 0">
          <van-col span="24" class="classCol">热门推荐</van-col>
          <van-col span="8" v-for="(item,index) in arr" :key="index" @click="handleItem(index)">
            <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
            <p>电脑</p>
          </van-col>
        </van-row>

        <van-row type="flex" v-if="active === 1">
          <van-col span="24" class="classCol">手机数码</van-col>
          <van-col span="8" v-for="(item,index) in arr" :key="index" @click="handleItem(index)">
            <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
            <p>手机</p>
          </van-col>
        </van-row>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchValue: '',
      active: 0,
      arr: [1, 2, 3, 4, 5, 6, 7],
      items: [
        { text: '热门推荐' },
        { text: '手机数码' },
        { text: '家用电器' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' },
        { text: '分组 2' }
      ]
    }
  },
  mounted () {},
  methods: {
    // 头部返回主页按钮
    hanldeHome () {
      this.$router.push('/')
    },
    // 返回分类
    handleItem (index) {
      this.$router.push('/classify1')
    },
    // 会员登录
    logout () {
      if (window.sessionStorage.getItem('token')) {
        return
      }
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.topRow {
  border-bottom: 1px solid #ccc;
  .van-icon {
    margin-top: 15px;
    margin-left: 10px;
  }
}

.van-row {
  flex-wrap: wrap;
  .classCol {
    color: black;
    font-size: 20px;
    margin: 20px auto;
  }
  p {
    padding-left: 25px;
  }
}

</style>
